<template>
	<view class="order_search_container">
		<view class="search_banner_img">
			<image src="/static/order-search-banner.png" mode="widthFix" class="banner_img"></image>
		</view>
		<view class="order_search_box">
			<view class="search_title_box">
				<view class="search_title">
					平台订单查询
				</view>
				<view class="search_tip">
					查询相关订单
				</view>
			</view>

			<view class="search_img_box">
				<image src="/static/icon-search-order.png" mode="" class="search_img"></image>
			</view>
		</view>

		<view class="search_input_box">
			<view class="search_input">
				<u-input v-model="phone" :border="false" maxlength="11" :clearable="false" placeholder="请输入收货手机号"
					placeholder-style="font-family: Source Han Sans CN;font-weight: 400;font-size: 28rpx;color: #808080;" />
			</view>
			<view class="query_btn" @click="handlerQuery">
				查 询
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: ''
			}
		},
		methods: {
			// 查询
			handlerQuery() {
				if (this.phone == '') {
					uni.showToast({
						title: '请输入收货手机号',
						icon: 'none'
					})
					return
				} else {
					uni.navigateTo({
						url: '/pages/queryOrder/queryDetail?number=' + encodeURIComponent(JSON.stringify(this
							.phone))
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order_search_container {

		.search_banner_img {
			width: 100%;

			.banner_img {
				width: 100%;
			}
		}

		.order_search_box {
			position: absolute;
			top: 36rpx;
			right: 58rpx;
			display: flex;
			align-items: center;
			width: 569rpx;
			z-index: 999;

			.search_title_box {

				.search_title {
					font-family: FZLanTingHeiS-R-GB;
					font-weight: 400;
					font-size: 39rpx;
					color: #333333;
					padding-bottom: 27rpx;
				}

				.search_tip {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 30rpx;
					color: #808080;
					text-shadow: 0px 16rpx 13rpx rgba(138, 179, 255, 0.23);
				}
			}

			.search_img_box {
				width: 310rpx;
				height: 278rpx;

				.search_img {
					width: 100%;
					height: 100%;
				}
			}
		}

		.search_input_box {
			position: absolute;
			top: 254rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 706rpx;
			height: 65vh;
			background: #FFFFFF;
			box-shadow: 0px 8rpx 10rpx 1px rgba(213, 213, 213, 0.14);
			border-radius: 20rpx;
			border: 2rpx solid #FFFFFF;
			padding: 96rpx 22rpx 0;

			.search_input {
				display: flex;
				align-items: center;
				width: 661rpx;
				height: 79rpx;
				background: #F4F8FB;
				border-radius: 14rpx;
				padding: 0 0 0 38rpx;
			}

			.query_btn {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 79rpx;
				background: #0E255B;
				border-radius: 14rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFD79A;
				margin-top: 43rpx;
			}
		}
	}
</style>